.full-screen-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* 确保最小高度为视口高度 */
}

/* Header 和 Footer 的固定高度（或根据需要调整） */
.Header,
.Footer {
    flex: 0 0 auto;
    /* 不增长，不收缩，基于内容的高度 */
}

.main-layout {
    background: linear-gradient(120deg, #eff1f5 20%,
            #dde6f7 80%) no-repeat;
    margin-top: 63px;
    display: flex;
    overflow: auto;
    flex: 1 0 auto;

    /* 如果内容超出容器大小，允许滚动 */
}

.left-side {
    width: 530px;
    min-height: 740px;
    /* border-right: 1px solid #dfe1e6; */
    /* 右侧竖线 */
    display: flex;
    justify-content: center;
    /* align-items: center; */
    background-color: #e6e9ef;
    padding-left: 250px;
}

.right-side {
    width: calc(100% - 530px);
    min-height: 740px;
    background-color: #eff1f5;
    overflow-y: hidden;
}

.left-side-content {
    width: 240px;
    min-height: 740px;
    border-top: 1px solid #bcc0cc;
    ;
}

.left-side-content-header {
    display: block;
    height: 35px;
    line-height: 24px;
    font-size: 14px;
    color: #4c4f69;
    align-items: center;

    padding: 4px 0px;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: default;
}

.text {
    color: #5c5f77;
    height: 35px;
    line-height: 24px;
    font-size: 14px;
    align-items: center;
}

.text:hover {
    color: #8839ef;
}

.left-side-content-body a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    /* 允许点击 */
    display: block;
}

.left-side-content-body a.active .text {
    color: #8839ef;
    /* 选中时的文字颜色 */
    font-weight: bold;
    /* 选中时加粗 */
}

.text {
    color: #5c5f77;
    height: 35px;
    line-height: 24px;
    font-size: 14px;
    align-items: center;
    padding: 4px 0px;
    transition: color 0.3s;
    /* 添加颜色过渡效果 */
}

/* 新增：通用响应式设置 */
@media (max-width: 1200px) {
    .left-side {
        padding-left: 150px;
        /* 中等屏幕减少留白 */
    }
}

@media (max-width: 992px) {
    .left-side {
        padding-left: 80px;
        /* 平板端减少留白 */
        width: 400px;
    }

    .right-side {
        width: calc(100% - 400px);
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .main-layout {
        flex-direction: column;
        /* 小屏幕改为垂直布局 */
        margin-top: 48px;
        /* 减少顶部间距 */
    }

    .left-side,
    .right-side {
        width: 100%;
        /* 全宽显示 */
        min-height: auto;
        /* 去除固定高度 */
        padding: 20px;
        /* 添加内边距 */
    }

    .left-side {
        padding-left: 20px;
        /* 重置左侧留白 */
        border-right: none;
        /* 移除分割线 */
        border-bottom: 1px solid #dfe1e6;
        /* 底部添加分割线 */
    }

    .left-side-content {
        width: 100%;
        /* 内容区全宽 */
        min-height: auto;
    }

    /* 文字适配 */
    .text {
        font-size: 13px;
        height: auto;
        padding: 8px 0;
    }
}

/* 小屏幕手机适配 */
@media (max-width: 480px) {
    .left-side-content-header {
        font-size: 13px;
    }

    .text {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* 原有样式保留 */
.full-screen-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ...其他原有样式保持不变... */

/* 新增：图片响应式 */
.right-side img {
    max-width: 100%;
    height: auto;
}